<html>
  <head>
    <style>
      html {
        background-color: #000;
        color: #fff;
      }
      
      body {
        background-color: #446;
        max-width: 400px;
      }

      .display {
        display: flex;
        /*justify-content: flex-end;*/
        align-items: center;
        height: 70px;
        padding: 0 10px;
        background-color: #668;
        font-size: 20px;
      }

      .buttons {
        display: flex;
        flex-wrap: wrap;
        height: 400px;
      }

      .buttons > button {
        background-color: #2196F3;
        flex-grow: 1;
        flex-basis: 20%;
        margin: 3px;
      }
    </style>
  </head>
  <body>
    <div class="display">0</div>

    <div class="buttons">
      <button>7</button>
      <button>8</button>
      <button>9</button>
      <button>*</button>

      <button>4</button>
      <button>5</button>
      <button>6</button>
      <button>-</button>

      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>+</button>

      <button>0</button>
      <button>,</button>
      <button>/</button>
      <button>=</button>
    </div>

    <script>
      const display = document.querySelector('.display')
      for (const btn of document.querySelectorAll('.buttons button')) {
        btn.onclick = () => display.textContent += btn.textContent
      }
    </script>
  </body>
</html>
